<!-- 对应职级 -->
<template>
  <div class='corres_rank'>
    <Row type="flex" justify="end">
      <Col span="3"><Button icon="ios-add" type="primary" @click="addNode">添加职级</Button>
      </Col>
    </Row>
    <div class="rank_list_content">
      <Table ref="table" border :columns="columns" :data="tableList" height="400"
        class="table_node">
        <!-- 审核人类型 -->
        <template slot-scope="{ row }" slot="dtRankName">
          <Input v-model="row.dtRankName"
            @on-change="e=>{return onChangetable(row,e)}"></Input>
        </template>
        <!-- 审核人类型 -->
        <template slot-scope="{ row }" slot="positionRankVOList" class="abc">
          <Tag v-for="item in row.positionRankVOList" :key="item.rankId" :name="item.rankId"
            class="tag_cls">
            {{ item.rankName }}
            <Icon type="ios-close" @click="handleClose(row,item.rankId)" />
          </Tag>
        </template>
      </Table>
    </div>

    <add-rank ref="addRank" @rankPageChange='rankPageChange' />
  </div>
</template>

<script>
  import addRank from './addRank.vue'
  import columnsAll from '../opt/rankColumns'
  export default {
    components: {
      addRank,
    },
    data() {
      return {
        columns: [],
        tableList: [],
        chenckRankId: [],
        delDtRankIds: []
      }
    },
    methods: {
      onChangetable(row) {
        let list = this.tableList
        list.splice(row._index, 1, row)
      },
      getData(data) {
        this.tableList = data || []
        this.delDtRankIds = []
        this.columns = columnsAll.processNodeColumns(this, this.tableList.length)
      },
      handleAdd(data) {
        let chenckRankId = []
        this.tableList.map(item => {
          item.positionRankVOList.length > 0 && item.positionRankVOList.map(itemT => {
            chenckRankId.push(itemT.rankId)
          })
        })
        this.$refs.addRank.show(data, chenckRankId)
      },
      handleClose(data, id) {
        let listIndex = data.positionRankVOList.indexOf(
          data.positionRankVOList.filter((d) => d.rankId == id)[0]
        )
        data.positionRankVOList.splice(listIndex, 1)
        this.onChangetable(data)
      },
      //接受子组件传过来的选中职级
      rankPageChange(data) {
        this.onChangetable(data.parentRowData)
      },
      //添加审核节点
      addNode() {
        let dataNode = {
          dtRankName: '',
          positionRankVOList: [],
          rankIds: [],
          _index: this.tableList.length,
          sort: this.tableList.length + 1
        }
        this.tableList.push(dataNode)
        this.columns = columnsAll.processNodeColumns(this, this.tableList.length)
      },
      //删除
      delete(row) {
        console.log(row, '88888')
        if (row.dtRankId) {
          this.delDtRankIds.push(row.dtRankId)
        }
        let index = row._index
        if (index >= 0) this.tableList.splice(index, 1)
        this.columns = columnsAll.processNodeColumns(this, this.tableList.length)
      },
      // 上移
      upItems(index) {
        let update = this.tableList[index - 1]
        this.tableList.splice(index - 1, 1)
        this.tableList.splice(index, 0, update)
      },
      // 下移
      downItems(index) {
        let downdata = this.tableList[index + 1]
        this.tableList.splice(index + 1, 1)
        this.tableList.splice(index, 0, downdata)
      },
    },
  }
</script>
<style lang='scss' scoped>
  .corres_rank {
    .rank_list_content {
      border-top: 1px solid #ccc;
      margin-top: 20px;
      padding-top: 20px;

      ::v-deep.ivu-table-cell-slot {
        padding: 10px 0;
      }

      .no_data {
        font-size: 20px;
        text-align: center;
      }
    }
  }
</style>